<template>
  <div class="nav-warp">
    <ul>
      <li v-for="(item, i) in navList" :key="i" :class="currentModule === item.to ? 'selected': ''" @click="openModule(i)"><svg-icon :icon-class="item.icon"></svg-icon> {{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        { title: '个性推荐', to: '/discover', icon: 'music' },
        { title: '歌单', to: '/files', icon: 'musiclist' },
        { title: '排行榜', to: '/gather', icon: 'toplist' },
        { title: '歌手', to: '/authority', icon: 'singer' },
        { title: 'MV', to: '/authority', icon: 'mv' },
        { title: '最新音乐', to: '/authority', icon: 'latest' },
      ],
      selectModule: 0,
      currentModule: ''
    }
  },
  methods: {
    openModule(i){
      this.$router.push(this.navList[i].to)
    }
  },
  watch:{
    '$route.path': {
       handler (val, oldVal) {
        let reg = new RegExp('(^/[a-zA-Z]+)/?')   //匹配 url的首段
        if(reg.exec(val)){
          this.currentModule = reg.exec(val)[1]
        }
      },
      immediate: true
    }

  }
}
</script>

<style lang="scss" scoped>
.nav-warp {
  width: 350px;
  height: 100%;
  float: left;
  padding: 5px;
  box-shadow: 2px 0px 6px 0px rgba(61, 90, 254, 0.15);
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  li {
    font-size: 14px;
    font-weight: 600;
    padding: 20px 10px;
    margin: 5px 0px;
    user-select: none;
    cursor: pointer;
    box-shadow: 2px 2px 9px #eee;
    border-radius: 4px;
  }
  li:hover{
    background-color: #dddedf;
  }
  .selected {
    color: rgba(61, 90, 254, 100);
    border-left: #3d5afe 4px solid;
    box-shadow: 2px 2px 6px #ccc;
  }
}
</style>
